<style lang="less" scoped>


.ivu-menu-horizontal.ivu-menu-light:after{
  background-color:transparent!important;

}
.MeauStyle{
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.21);
}
.layout{
    position: relative;
    height: 100%;
    .layout-logo{
        width: 100px;
        height: 60px;
        float: left;
        position: relative;
        top: 0;
        text-align: center;
        color: #fff;
        background-color: #222d32;
        white-space: nowrap;
        transition: width .2s ease-out;
    }
    .layout-header{
        position: absolute;
        left: 230px;
        .rotate-button90{
          transform:rotate(0);
          -ms-transform:rotate(0);   /* IE 9 */
          -moz-transform:rotate(0);  /* Firefox */
          -webkit-transform:rotate(0); /* Safari 和 Chrome */
          -o-transform:rotate(0);  /* Opera */
          transition: all .2s ease-out;
        }
        .rotate-button0{
          transform:rotate(-90deg);
          -ms-transform:rotate(-90deg);   /* IE 9 */
          -moz-transform:rotate(-90deg);  /* Firefox */
          -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
          -o-transform:rotate(-90deg);  /* Opera */
          transition: all .2s ease-out;
        }
    }
    .layout-nav{
        width: 180px;
        float: right;
        .ivu-menu-item-active,.ivu-menu-item:hover{
          border-bottom: none;
        }
    }
}

.layout .ivu-row-flex{
  height: 100%;
}
.ivu-col{
    transition: width .2s ease-out;
}
.main-wrap i{
  vertical-align: middle;
}
</style>

<template>
  <div>
    <Menu mode="horizontal" active-name="1" class="MeauStyle">
      <div
        class="layout-logo"
        v-if="!hideMenuText"
        :style="{width: !hideMenuText?'230px':''}"
        style="font-size:23px;font-weight:bold;"
      >
        <img src="./../../../assets/big_logo.png" style="width:70px;vertical-align: middle;">
        <span style="line-height:30px;position:relative;top:2px;">用户行为分析</span>
      </div>
      <div
        class="layout-logo"
        v-else
        :style="{width: hideMenuText?'60px':''}"
        style="font-size:23px;font-weight:bold;"
      >
      </div>
      <div class="layout-header" :style="{left: hideMenuText?'60px':'230px'}">
        <div
          type="text"
          @click="toggleClick"
          style="width:80px;height:50px;text-align:center;transition: 0.45s"
        >
          <Icon
            :class="hideMenuText?'rotate-button0':'rotate-button90'"
            style="transition: 0.45s"
            type="md-reorder"
            size="32"
          ></Icon>
        </div>
      </div>
      <div class="layout-header" :style="{left: hideMenuText?'140px':'310px'}">
        <Select
          v-model="projectidCurrent"
          style="width:200px"
          placeholder="请选择项目"
          @change="changeProjectid"
        >
          <Option v-for="item in projectIdList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="layout-nav" style="width:230px;">

        <MenuItem name="1" >
          <div @click="showHelpDoc">
            <Icon type="android-exit" size="20"></Icon>帮助文档
          </div>
        </MenuItem>

        <MenuItem name="2">
          <Dropdown @click="changeProfile">
            <Icon type="ios-person" size="20"></Icon>个人中心
            <DropdownMenu slot="list">
              <DropdownItem name="userinfo">个人信息</DropdownItem>
              <DropdownItem name="change_password">修改密码</DropdownItem>
              <DropdownItem @click.native="exit">退出</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </MenuItem>

      </div>


    </Menu>
    <HelpDocument
      v-model="helpDocShow"
      @cancel="handleCancel"
      @ok="handleOk">
    </HelpDocument>

  </div>

</template>


<script>
import { mapState } from "vuex";
import HelpDocument from "./components/HelpDocument"
export default {
  components: {HelpDocument},
  inject: ["reload"],
  data() {
    return {
      confirmModalShow:false,
      helpDocShow: false,
      hideMenuText: false,
      projectidCurrent: "",
      projectList: [],
    };
  },
  computed: mapState([
    "hideMenuTexts",
    "pageOpenedList",
    "projectIdList",
    "projectId"
  ]),
  created() {
    this.hideMenuText = this.hideMenuTexts;
    this.projectidCurrent = this.projectId;
  },
  watch: {
    projectId(newValue, oldValue) {
      this.projectidCurrent = newValue;
    }
  },
  methods: {
    toggleClick() {
      this.hideMenuText = !this.hideMenuTexts;
      this.$store.commit("hideMenuText", !this.hideMenuTexts);
    },
    exit() {
      this.$sessionStore.clear();
      this.$router.push({
        name: "login"
      });
      this.$store.commit("pageOpenedList", this.pageOpenedList.splice(0, 1));
    },
    changeProjectid() {
      this.$store.commit("changeProjectid", this.projectidCurrent);
      let pageCache = this.$sessionStore.getPageCache();
      if (pageCache && typeof pageCache.lastPage === "string") {
        if (pageCache.lastPage.indexOf('dashboard')>=0){
          this.$axios.get(this.$api.report + "/dashboard",
              {
                headers: {
                  "Authorization": "Bearer " + this.$sessionStore.fetch(),
                  "Accept": "application/json"
                },
                params: {
                  projectId: this.$store.state.projectId
                }
              }
          ).then(response => {
            if (response.status === 200) {
              this.$store.commit('updateDashboard', response.data);
              this.$store.commit('current_page_name', '/main/dashboard/'+response.data[0].id);
              this.$router.push({
                path: '/main/dashboard/'+response.data[0].id,
              });

            }
          }).catch(error => {
            console.log(error);
          }).finally(() => {
            this.reload()
          });
        }else {
          this.$router.push({
            name: pageCache.lastPage,
          });
          this.reload()
        }
      }else {
          this.$router.push({
              name: "dailyDataView",
          });
      }

    },
    changeProfile: function(name) {
      this.$router.push({
        name: name
      });
    },
    showHelpDoc: function () {
      this.helpDocShow = true
    },
    handleOk: function (e,data){
      this.helpDocShow = false
    },
    handleCancel: function (){
      console.log('cancel')
      this.helpDocShow = false
    }
  }
};
</script>




